<template>
	<view class="bgf8">
		<view style="height: 20rpx;">  </view>
		<!-- 小计 -->
		<view class="w343" >
			<view class="w90 fs14" style="display: flex;position: relative;height: 120rpx;">
				<image class="GWCimg" style="top: 30rpx;" src="../../static/0000000000.png" mode=""></image>
				<h5 style="margin-left: 20rpx;line-height: 90rpx;">鲜味麻辣烫（万达广场店)</h5>
				<image class="Return" src="../../static/iconfh.png" mode=""></image>
				<view class="MJ fs11" style="left: 50rpx;">10减5</view>
				<view class="MJ fs11" style="left: 190rpx;">30减15</view>
			</view>
			<!-- 套餐 -->
			<view class="w90" >
				<view style="display: flex; margin: 30rpx 0">
					<view>
						<image class="GWCimg" style="top: 30rpx;" src="../../static/0000000000.png"></image>
					</view>
					<image class="GWimg" style="margin-left: 20rpx;" src="../../static/22.png"></image>
					<view style="margin-left: 30rpx;width: 70%;position: relative;">
						<view class="fs13" style="position: relative;display: flex;height: 25rpx;line-height: 25rpx;">
							<text class="Zk fs10">折</text>
							<h5 style="margin-left: 5rpx;line-height: 20rpx;width: 50%;white-space: nowrap;">9.9豪华单人麻辣香...</h5>
							<text style="position: absolute;right: 70rpx;text-decoration:line-through;color: rgba(164,164,164,1);">￥18.8</text>
							<text class="fs15" style="position: absolute;right: 0;top: 0;color: rgba(254,64,30,1);font-weight: 700;">￥8.8</text>
						</view>
						<view class="fs11" style="color: rgba(165,165,165,1);">
							<text>规格：微辣</text><br>
							<text>×1 </text>
						</view>
					</view>
				</view>
			</view>
			<!-- 腐竹 -->
			<view class="w90"  v-for="item in 2">
				<view style="display: flex; margin: 30rpx 0">
					<view class="" @click="choice(item)">
						<image class="GWCimg" v-if="imgs" style="top: 30rpx;" src="../../static/0000000000.png"></image>
						<image class="GWCimg" v-else style="top: 30rpx;" src="../../static/11111111.png"></image>
					</view>
					<image class="GWimg" style="margin-left: 20rpx;" src="../../static/22.png"></image>
					<view style="margin-left: 30rpx;width: 70%;position: relative;">
						<view class="fs13" style="position: relative;display: flex;height: 25rpx;line-height: 25rpx;">
							<text class="fs10"></text>
							<h5 style="margin-left: 5rpx;line-height: 20rpx;width: 50%;white-space: nowrap;">腐竹</h5>
							<text style="position: absolute;right: 70rpx;text-decoration:  line-through;"></text>
							<text class="fs15" style="position: absolute;right: 0;top: 0;color: rgba(254,64,30,1);font-weight: 700;">￥2.9</text>
						</view>
						<view class="fs11" style="color: rgba(165,165,165,1);">
							<text></text><br>
							<text>×1</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 剩余3件商品 -->
			<view class="center fs12" style="color: rgba(165,165,165,1);">
				剩余3件商品<image style="width: 18rpx;height: 10rpx;margin-left: 8rpx;" src="../../static/iconxia.png" mode=""></image>
			</view>
			<!-- 满减  结算 -->
			<view class="w90 fs13" >
				<view style="padding: 30rpx 0;font-weight: 700;border-bottom: 1rpx solid rgba(233,233,233,1);">
					<view style="position: relative;line-height: 46rpx;">
						<text>配送费</text>
						<text class="redrt">￥0</text>
					</view>
					<view style="position: relative;line-height: 46rpx;">
						<text>包装费</text>
						<text class="redrt">￥4</text>
					</view>
					<view style="position: relative;line-height: 46rpx;">
						<text>店铺满减</text>
						<text class="redrt">-￥16</text>
					</view>
				</view>
				<view style="position: relative; margin-top: 24rpx;">
					<text>已优惠</text>
					<text style="color: rgba(254,64,30,1);">￥16.05</text>
					<view class="redrt fs12" style="top: 0;text-align: right;right: 0;">
						<text style="color: rgba(51,51,51,1);">合计：</text>￥
						<text class="fs16">8.88</text>
					</view>
				</view>
				<view style="height: 80rpx;margin-top: 38rpx;position: relative;">
					<view class="fs12 JS" style="">
						结算
					</view>
				</view>
			</view>
		</view>
		<!-- 结账 -->
		<view class="yjjs">
			<view class="fs15 quanxuan">
				<image src="../../static/0000000000.png" mode=""></image>
				<text>全选</text>
			</view>
			<view class="heji" style="right: 35%;text-align: right;">
				<view calss="fs14"><text>合计</text><text>￥88.82</text> </view>
				<view class="fs10"><text>总优惠</text><text style="color: rgba(254,64,30,1);">￥8.88</text> </view>
			</view>
			<view class="heji" style="right: 5%;text-align:center;background:rgba(255,203,87,1);border-radius:15rpx;padding: 10rpx 30rpx">
				<view calss="fs14"><text>一键结算</text> </view>
				<view class="fs10"><text>2个商家</text> </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs:false
			}
		},
		methods: {
		}
	}
</script>

<style>
	.w343 {
		width: 686rpx;
		margin: 0 auto;
		background: #FFFFFF;
	}

	.w90 {
		width: 90%;
		margin: 0 auto;
		/* border-bottom: 1px solid #ececec; */
	}

	.GWimg {
		width: 100rpx;
		height: 94rpx;
	}

	.redrt {
		font-weight: 500;
		color: rgba(255, 67, 67, 1);
		position: absolute;
		right: 0;
	}
.GWCimg{
	width: 32rpx;
	height: 32rpx;
}
.Return{
	width: 10rpx;
	height: 18rpx;
	position: absolute;
	right: 5%;
	top: 40rpx;
}
.MJ{
	width: 116rpx;
	height: 36rpx;
	line-height: 36rpx;
	text-align: center;
	color: rgba(255,125,77,1);
	border: 1rpx solid rgba(251,191,170,1);
	position: absolute;
	top: 80rpx;
}
.Zk{
	display: inline-block;
	width: 22rpx;
	height: 22rpx;
	color: #FFFFFF;
	transform: scale(0.9);
	background: rgba(232,28,55,1);
}
.JS{
	width: 192rpx;
	height: 54rpx;
	background: #ffcb57;
	border-radius: 12rpx;
	text-align: center;
	line-height: 54rpx;
	position: absolute;
	right: 0;
}
.yjjs{
	width: 100%;
	height: 136rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
}
.quanxuan{
	line-height: 32rpx;
	color: rgba(51,51,51,1);
	position: absolute;
	left: 5%;
	top: 15%;
}
.quanxuan>image{
	width: 32rpx;
	height: 32rpx;
}
.quanxuan>text{
	width: 100rpx;
	position: absolute;
	left: 50rpx;
}
.heji{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
</style>
